<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				height: 300px;
				text-align: center;
				background-color: skyblue;
				padding: 20px;
				border-radius: 6px;
				margin: 0 auto;
				margin-bottom: 20px;
			}
			.box>div{
				margin-bottom: 30px;
			}
			.d3>input{
				cursor: pointer;
			}
			table{
				margin: 0 auto;
				width: 700px;
				height: 20px;
				table-layout: fixed;
				text-align: center;
			}
			.box button{
				width: 50px;
				cursor: pointer;
				background-color: orangered;
				border:4px solid darkred;
				
			}
			thead{
				font-size: 20px;
				font-weight: bold;
			}
			.delAll{
				position: fixed;
				right: 1203px;
			}.color{
				position: fixed;
				right: 1140px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="d1">
				姓名：
				<input type="text" id="user" value="" />
			</div>
			<div class="d2">
				密码：
				<input type="password" id="password" value="" />
			</div>
			<div class="d3">
				<input type="radio" name="sex"  value="1"/>男<label for="man"></label>&emsp;
				<input type="radio" name="sex"  value="2"/>女<label for="woman"></label>
			</div>
			<button type="button" class="btn">提交</button>
		</div>
		<table border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>密码</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td></td>
					<td></td>
					<td></td>
					<td>
					    <button type="button" onclick="del(${arr[i].id})">删除</button>
					</td>
				</tr> -->
			</tbody>
		</table>
		<button type="button" class="delAll" onclick="delAll()">全部删除</button>
		<button type="button" class="color" onclick="bs(this)">隔行变色</button>
	</body>
	<script type="text/javascript">
		var user = document.querySelector(".d1>#user");
		var password = document.querySelector("#password");
		var sexs = document.querySelectorAll(".d3>input[type='radio']");
		var btn = document.querySelector(".btn");
		var tbody=document.querySelector("tbody");
		
		if (localStorage.bb) {
			var arr=JSON.parse(localStorage.bb);
			/* show(arr); */
		} else{
			var arr = [];
			localStorage.bb = JSON.stringify(arr)
		}
		
		btn.onclick = function(){
			var obj = {
				user:user.value,
				password:password.value,
				sex:getsexV(),
				id:+new Date()
			}
			arr.push(obj);
			localStorage.bb = JSON.stringify(arr);
			show(arr)
			user.value=password.value=""
		}
		// 获取单选值
		function getsexV(){
			for(i=0;i<sexs.length;i++){
				if (sexs[i].checked) {
					return sexs[i].value;
				}
			}
		}
		
		/* 输出汉字 */
		function getsexFn(value){
			return value == "1"?"男":"女";
		}
		/* 渲染数据 */
		function show(arr){
			tbody.innerHTML = "";
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML+=`
				    <tr>
					    <td>${i+1}</td>
				    	<td>${arr[i].user}</td>
				    	<td>${arr[i].password}</td>
				    	<td>${getsexFn(arr[i].sex)}</td>
				    	<td>
						    <button type="button" onclick="move(${arr[i].id},this)">上移</button>
						    <button type="button" onclick="del(${arr[i].id})">删除</button>
							<button type="button" onclick="xg(${arr[i].id},this)">修改</button>
							<button type="button" onclick="move(${arr[i].id},this)">下移</button>
						</td>
				    </tr>
				`;
			}
		}
		/* 删除数据 */
		function del(id){
			for(var i=0;i<arr.length;i++){
				if (arr[i].id == id) {
					arr.splice(i,1)
				}
			}
			localStorage.bb = JSON.stringify(arr)
			show(arr)
		}
		
		/* 修改数据 */
		function xg(id,t){
			if(t.innerHTML == "修改"){
				t.innerHTML = "完成";
				for(var i=0;i<arr.length;i++){
					if(arr[i].id == id){
						user.value = arr[i].user;
						password.value = arr[i].password;
					}
				}
			} else{
				t.innerHTML = "修改";
				for (var i=0;i<arr.length;i++) {
					if(arr[i].id == id){
						arr[i].user = user.value;
						arr[i].password = password.value
					}
				}
				localStorage.bb = JSON.stringify(arr);
				show(arr);
				user.value = password.value =""
			}
				
		}
		/* 全部删除 */
		function delAll(){
		    arr = []
			localStorage.bb = JSON.stringify([]);
			show(arr);
		}
		/* 隔行变色 */
		function bs(t){
			var trs = document.querySelectorAll("tbody tr")
			if (t.innerHTML == "隔行变色") {
				t.innerHTML = "关闭变色";
				for(var i=0;i<trs.length;i++){
					if (i%2 == 0) {
						trs[i].style.background="red";
					}
				}
			} else{
				t.innerHTML = "隔行变色";
				for(var i=0;i<trs.length;i++){
					trs[i].style.background=""
				}
			}
				
		}
		/* 上下移动 */
		function move(id,t){
			for(var i=0;i<arr.length;i++){
				if (t.innerHTML == "上移" && i!=0) {
					var c=arr[i];
					arr[i]=arr[i-1];
					arr[i-1]=c
				} else if (t.innerHTML == "下移" && i!=arr.length-1){
					var c=arr[i];
					arr[i]=arr[i+1];
					arr[i+1]=c
				}
			}
			localStorage.bb = JSON.stringify(arr)
			show(arr);
		}
	</script>
</html>
